"use client"
import Image from "next/image"
import useCurrentUser from "../utils/hooks/useCurrentUser"

export default function ProfilePage() {
    const { data: user } = useCurrentUser()
    return (<>
        <div className="flex flex-col">
            <div className="text-3xl md:text-6xl text-center">Who is watching ?</div>
            <div className="flex items-center justify-center gap-8 mt-10">
                <div onClick={() => { }}>
                    <div className="group flex-row w-44 mx-auto">
                        <div className="w-44 h-44 rounded-md flex items-center justify-center border-2 border-transparent group-hover:cursor-pointer group-hover:border-white overflow-hidden">
                            <Image src={"/avatar.png"} alt="profile" width={44} height={44} layout="responsive" />
                        </div>
                        <div className="mt-4 text-gray-400 text-2xl text-center group-hover:text-white">
                            {user?.name}
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </>)
}
